<template>
  <!-- 导航栏 -->
  <div class="article-container">
    <van-nav-bar
      class="page-nav-bar"
      title="文章详情"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="main-wrap">
      <!-- 加载中 -->
      <van-loading 
      v-if="loading"
      class="loading"
      type="spinner" 
      color="#1989fa" 
      size="80px" 
      vertical
      text-size="20px"
      >加载中...</van-loading>

      <!-- 加载完成  文章详情 -->
      <div v-else-if="article.title" class="article-detail">
        <!-- 文章标题 -->
        <h1 class="article-title">{{article.title}}</h1>
        <!-- 用户信息 -->
        <van-cell class="user-info" >
          <van-image
            slot="icon"
            class="avatar"
            round
            width="75px"
            height="75px"
            fit="cover"
            :src="article.aut_photo"
          />
          <div slot="title" class="user-name">{{article.aut_name}}</div>
          <div slot="label" class="date">{{article.pubdate|relativeTime}}</div>
          <!-- 关注按钮 -->
          <!-- 模板中的$event就是事件参数 -->
          <!-- 当传递给子组件的数据既要用又要改
          传递 :is_followed="article.is_followed"
          接受 props
          改 this.$emit('update_is_followed',!this.is_followed)
             @update_is_followed="article.is_followed=$event"
          简写方式v-model 
          value="article.is_followed"
          @input="article.is_followed=$event"-->


          <follow 
          class="follow-btn" 
          v-model="article.is_followed"
          :user_id="article.aut_id"
          ></follow>
        </van-cell>
        <!-- 文章内容 -->
        <div class="article-content markdown-body" v-html="article.content"></div>
        <van-divider
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        >
          正文结束
        </van-divider>

        <!-- 文章的评论列表 -->
        <comment-list 
        :source="article.art_id"
        :list="commentList"
        @total-count="commentTotal=$event"
        @reply-click="onReplyClick"
        ></comment-list>




        <!-- 底部区域 -->
    <div class="article-bottom">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
        @click="show=true"
      >写评论</van-button>
      <van-icon
        name="comment-o"
        :badge="commentTotal"
        color="#777"
      />
      <!-- 收藏 -->
      <collect-article
        v-model="article.is_collected"
        :articleId="article.art_id"
      />
      <!-- 点赞 -->
      <good-article 
      v-model="article.attitude"
      :articleId="article.art_id"
      ></good-article>
      <van-icon name="share" color="#777777"></van-icon>
    </div>

    <!-- 写评论的弹出层 -->
    <van-popup v-model="show" position="bottom" >
      <comment-post 
      :target="article.art_id"
      @post-success="onPostSuccess"
      />
    </van-popup>


      </div>
      <!-- 加载失败  404 -->
      <div v-else-if="errStatus==404" class="error-wrap">
        <van-icon name="failure" size="2rem"/>
        <p class="text">该资源不存在或已删除！</p>
      </div>
      <!-- 加载失败  其他位置错误 -->
      <div v-else class="error-wrap">
        <van-icon name="failure" size="2rem"/>
        <p class="text">内容加载失败！</p>
        <van-button @click="loadArticle" class="retry-btn" round>点击重试</van-button>
      </div>
    </div>
    <!-- 评论回复 -->
    <van-popup 
    v-model="isReplyShow" 
    position="bottom" 
    style="height:90%">
      <comment-reply 
      v-if="isReplyShow"
      :comment="currentComment"
      @closeReplyShow="isReplyShow=false"
      ></comment-reply>
    </van-popup>
    
  </div>

  

</template>
<script>
import Follow from '@/components/Follow'
import CollectArticle from '@/components/CollectArticle'
import {getArticleAPI} from '@/api'
import GoodArticle from '@/components/GoodArticle'
import CommentList from './components/comment-list.vue'
import CommentPost from './components/comment-post.vue'
import CommentReply from './components/comment-reply.vue'



export default {
  name:"Article",
  components:{
    Follow,
    CollectArticle,
    GoodArticle,
    CommentList,
    CommentPost,
    CommentReply,
  },
  provide:function(){
    return{
      articleId:this.articleId
    }
  },
  props:{
    articleId:{
      type:[String,Number],
      required:true
    }
  },
  data(){
    return {
      article:{},
      loading:true,
      errStatus:0,
      commentTotal:0, //评论的总条数
      show:false,  //写评论的弹出层
      commentList:[],
      isReplyShow:false,  //评论回复弹出层
      currentComment:{},  //当前评论项数据
    }
  },
  computed:{},
  watch:{},
  created(){
    this.loadArticle()

  },
  methods:{
    onClickLeft(){
      this.$router.back()
    },
    //加载文章详情
    async loadArticle(){
      try{
        // 模拟出错
        // if (Math.random()>0.2) {
        //   JSON.parse("dfefwf")
        // }
        
        const {data} =await getArticleAPI(this.articleId)
        this.article=data.data
      }catch(err){
        if(err.response&&err.response.status==404){
          this.errStatus=404
        }
      }
      this.loading=false

    },
    //发布评论后的操作
    onPostSuccess(data){
      //关闭弹出层
      this.show=false
      //将发布内容追加到列表顶部
      this.commentList.unshift(data.new_obj)
      //评论总数加1
      this.commentTotal++

    },
    //评论回复的操作
    onReplyClick(comment){
      this.isReplyShow=true
      this.currentComment=comment
    }
    


  }
}
</script>
<style lang="less" scoped>
@import "./github-markdown.css";
.article-container{
  padding-top: 92px;
  padding-bottom: 88px;
  .page-nav-bar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .main-wrap{
    height:90vh;
    overflow-y: scroll;
  }
  .loading{
    margin-top: 200px;
  }
  .article-title{
    font-size: 40px;
    padding: 50px 32px;
    margin: 0;
    color: #3a3a3a;
  }
  .van-cell::after {
    border-bottom: 0;
  }
  .user-info{
    background-color: transparent;
    padding: 0 32px;
    .avatar{
    width: 70px;
    height: 70px;
    margin-right: 17px;
    }
    .van-cell__label{
    margin-top: 0;
    }
    .van-cell__title{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .van-cell__value{
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
    }
    .user-name {
      font-size: 25px;
      font-weight: bold;
      color: #3a3a3a;
    }
    .date {
      font-size: 23px;
      color: #b7b7b7;
    }
    .follow-btn {
      width: 170px;
      height: 58px;
    }
    
  }
  .article-content {
    padding: 55px 32px;
    /deep/ p {
    text-align: justify;
    }
  }
  .error-wrap{
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .text{
    font-size: 30px;
    }
    .retry-btn{
      background-color: rgb(18, 245, 10);
      color: #fff;
    }
  }
  .article-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    height: 88px;
    border-top: 1px solid #d8d8d8;
    background-color: #fff;
    .comment-btn {
      width: 282px;
      height: 46px;
      border: 2px solid #eeeeee;
      font-size: 30px;
      line-height: 46px;
      color: #a7a7a7;
    }
    /deep/.van-icon {
      font-size: 40px;
      .van-info {
        font-size: 16px;
        background-color: #e22829;
      }
    }
  }
  
  
}
</style>